import React, {useRef, useState} from 'react';
import {message, Card} from 'antd';
import {useRequest} from "@@/plugin-request/request";
import {
  bucketList,
  insetReward,
  merchantList
} from "@/services/bz/api";
import {
  ProForm, ProFormInstance,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';

export default () => {
  const [merchantData, setMerchantData] = useState([]);
  const [bucketData, setBucketData] = useState([]);
  const ref = useRef<ProFormInstance>();

  const handleChange = async (value: string) => {

  };
  useRequest(merchantList, {
    onSuccess: (res) => {
      let data = [];
      //将拿到的返回值遍历
      res.list.map(item => {
        data.push({
          label: item.merchantCode,
          value: item.merchantCode
        })
      });
      setMerchantData(data);
      console.log("===", merchantData)
    },
  });
  useRequest(bucketList, {
    onSuccess: (res) => {
      let data = [];
      //将拿到的返回值遍历
      res.map(item => {
        data.push({
          label: item,
          value: item
        })
      });
      setBucketData(data);
    }
  });
  return (
    <div>
      <Card>
        <h2>新增绩效</h2>
        <ProForm
          title={"新增绩效"}
          formRef={ref}
          onFinish={async (values:API.AddRewardBean) => {
            if (values.clientCode == undefined) {
              message.error('请选择商户');
              return
            }
            if (values.bucket == undefined) {
              message.error('请选择阶段');
              return
            }
            if (values.target == undefined) {
              message.error('请输入目标绩效');
              return
            }
            if (values.finishType == undefined) {
              message.error('请选择模式');
              return
            }
            console.log("===",values)

            await insetReward(values).then((res)=>{
              message.success(res.msg);
              ref.current?.resetFields()
            },reason => {
              message.error(reason.data.msg);
            })
          }}
          request={async (data) => {
            return {};
          }}
        >
          <ProFormSelect
            options={merchantData}
            style={{width: 150}}
            onChange={handleChange}
            width="xs"
            name="clientCode"
            label="选择商户"
          />
          <ProFormSelect
            options={bucketData}
            style={{width: 150}}
            width="xs"
            name="bucket"
            label="选择阶段"
          />
          <ProFormText  width="md" name="target" label="目标绩效" placeholder="请输入目标绩效" />
          <ProFormSelect
            options={[
              {
                value: '1',
                label: '百分比',
              },{
                value: '2',
                label: '数量',
              }
            ]}
            style={{width: 150}}
            width="xs"
            name="finishType"
            label="选择模式"
          />

        </ProForm>

      </Card>
    </div>

  )
}
